<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        #list li{
            width: 300px;
            line-height: 40px;
            border-bottom: 1px solid #000;
            font-size: 25px;
            cursor: pointer;
        }
        div{
            position: absolute;
            top:50px;
            left:50px;
            border-radius: 50%;
        }
        #tar{position: relative;}
        #box1{width: 500px;height: 500px;background-color: #963;}
        #box2{width: 400px;height: 400px;background-color: #693;}
        #box3{width: 300px;height: 300px;background-color: #369;}
        #box4{width: 200px;height: 200px;background-color: #639;}
        #box5{width: 100px;height: 100px;background-color: #f00;}
    </style>
    <script src="./jquery-3.3.1.min.js"></script>
    <!-- <script src="./jquery-1.8.3.min.js"></script> -->
</head>
<body>
   <h1>JQ事件</h1>

   <button id="add">添加一行 li 标签</button>
   <button id="down">点击立即下载</button>
   <button id="remove">点击解绑</button>

   <a href="http://www.acfun.cn" id="ac">ACFUN</a>
   <a href="javascript:void(0)">死链/无效链接</a>

   <hr>

   <ul id="list">
       <li>不第后赋菊----黄巢</li>
       <li>待到秋来九月八,</li>
       <li>我花开后百花杀。</li>
       <li>冲天香阵透长安，</li>
       <li>满城尽带黄金甲.</li>
   </ul>

   <form action="1.php">
       <button type="submit">提交</button>
   </form>

   <div id="tar">
       <div id="box1">
           <div id="box2">
               <div id="box3">
                   <div id="box4">
                       <div id="box5"></div>
                   </div>
               </div>
           </div>
       </div>
   </div>

   <script>
    //    简写
    //    $('#list li').click(function(e){
    //        // console.log(e);
    //        // console.dir(this);
    //        // console.dir($(this));
    //        // console.log($(this).html());
    //    })

    // JQ 标准绑定形式
    // $('#list li').bild('click',function(){
        // alert($(this).html());
    // })

    // 多个时间的绑定
    // $('#list li').bind({
        // 'mouseover': function(){
            // $(this).css('background-color','#999');
        // },
        // 'mouseout': function(){
            // $(this).css('background-color','');
        // }
    // });

    //  //on() 单事件
    //  $('#list li').on('click', function(){
    //      alert($(this).html());
    //  })

    // on() 多事件
    // $('#list li').on('click', function(){
    //      'mouseover': function(){
    //          $(this).css('background-color','#369');
    //      },
    //      'mouseover': function(){
    //          $(this).css('background-color','');
    //      }
    // });

    //event
    //$('#list').on('mousemove', function(e){
    //    // console.log(e);
    //    //console.log(e.pageX, e.pageY); // 鼠标位置
    //    // console.log(eoffsetX, e.offsetY); // 相对位置
    // })

    // 添加新元素到页面之中
    $('#add').click(function(){
        $('<li>啊,真是一首好诗!!!!</li>').appendTo('#list');
    })

    // 事件委托/委派
    $(document).on('mouseover', '#list li', function(){
        $(this).css('background-color','#f00');
    }).on('mouseout', '#list li', function(){
        $(this).css('background-color','');
    });

    // 一次性的事件
    $('#down').one('click', function(){
        alert('澳门赌场在线,性感荷官在线发牌!');
    });

    // 解绑事件
    $('#remove').click(function(){
        console.log('解绑成功');

        // 解绑所有 li 的事件(非委托)
        // $('#list li').off();

        // 解绑 li 指定的事件(非委托)
        // $('#list li').off('mouseout click');

        // 解绑所有 li 的事件(委托)
        $(document).off('mouseout mouseover', '#list li');
    });

    // 自动触发
    $('#add').trigger('click');

    // 阻止默认事件
    $('form').on('submit', false);

    $('#ac').click(function (){
        // 处理逻辑
        return false;
    });

    // 阻止事件冒泡
    $('div').on('click', function(){
        $(this).css('background-color', '#000');
        return false;
    })
   </script>
</head>
</body>
</html>